<template>
  <div id="">
    <div class="p10">
      <house :houseInfo="houseInfo" :houseHeaderImg="houseHeaderImg"></house>
    </div>
    <p class="tipTxt">联系人信息</p>
    <ul class="releaseForm">
      <li>
        <span>姓名</span>
        <div class="rightForm">
          <input type="text" name="" v-model="name" maxlength="5" placeholder="请输入姓名,最多5个字">
          <!-- <img src="@/assets/images/right-icon@2x.png" width="10" alt=""> -->
        </div>
      </li>
      <li>
        <span>性别</span>
        <div class="">
          <!-- <mt-switch v-model="sex"></mt-switch> -->
          <span class="switchSpan" :class="{'lightBg':sex==0}" @click="switchSex">
            <em :style="{float:switchLeft}"></em>
            <i v-if="sex==1">女士</i>
            <i v-else>男士</i>
          </span>
        </div>
      </li>
      <li>
        <span>看房时间</span>
        <div class="rightForm" @click="openPicker">
          <input type="text" name="" v-model="reserveTimeShow" readOnly placeholder="请选择看房时间">
          <img src="@/assets/images/right-icon@2x.png" width="10" alt="">
        </div>
      </li>
      <li>
        <span>联系电话</span>
        <div class="rightForm">
          <input type="text" name=""
          v-model="mobile" maxlength="11"
          v-on:input="iptMobile" placeholder="请输入手机号码">
          <!-- <img src="@/assets/images/right-icon@2x.png" width="10" alt=""> -->
        </div>
      </li>
      <li v-show="difMobile">
        <span>验证码</span>
        <div class="rightForm">
          <input type="text" name="" maxlength="6"
          v-model="yzmCode" placeholder="输入验证码" style="width:50%;">
          <button type="button" name="button" class="btn" v-if="isGetYzmTime">发送({{yzmTime}}s)</button>
          <button type="button" name="button" class="inlineBtn" v-else @click="getYzm">获取验证码</button>
          <!-- <img src="@/assets/images/right-icon@2x.png" width="10" alt=""> -->
        </div>
      </li>
    </ul>
    <div class="fixedBottom">
      <button type="button" name="button" class="blockBtn" @click="submitReservation">提交预约</button>
    </div>
    <!-- 底部弹出选择 -->
    <mt-popup
      v-model="isMintPicker"
      position="bottom" style="width:100%;">
      <mint-picker
      @mintPickerBtn="mintPickerBtn"
      ></mint-picker>
    </mt-popup>
    <!-- 验证码错误提示 -->
    <comfirm-login :comfirmTitle="comfirmTitle" v-if="isWrong" @comfirmEvent="comfirmEvent"></comfirm-login>
  </div>
</template>
<script src="./reservation.js"></script>
<style lang="scss" scoped src="./reservation.scss"></style>
